<!-- // 单个全部属性获取 -->
<template>
    <div>
        <el-card>
            <template #header>
                <span class="title-span">API基础信息</span>
            </template>
            <!-- // 两个输入框  一个是名称  一个是描述 -->
            <el-form label-width="100">
                <el-form-item label="节点名称：">
                    <el-input v-model="props.showFlowData.data.label"></el-input>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input v-model="props.showFlowData.data.desc" type="textarea"></el-input>
                </el-form-item>
            </el-form>

        </el-card>

        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API状态</span>
            </template>

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIState.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIState.type" disabled></el-input>
                </el-form-item>
            </el-form>

        </el-card>


        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API输入</span>
            </template>

            <div>
                <el-form label-width="100">
                    <el-form-item label="名称：">
                        <el-input v-model="popShowData.APIInput.dataOne.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-input v-model="popShowData.APIInput.dataOne.type" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="值：">
                        <el-select v-model="popShowData.APIInput.dataOne.selectValue">
                            <el-option v-for="(item, index) in three_data_selectList" :key="index"
                                :label="item.data.label" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <el-divider />
            <div>
                <el-form label-width="100">
                    <el-form-item label="名称：">
                        <el-input v-model="popShowData.APIInput.dataTwo.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-input v-model="popShowData.APIInput.dataTwo.type" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="值：">
                        <el-checkbox-group v-model="popShowData.APIInput.dataTwo.checkList"
                            @change="handleJudgeAttribute(2)">
                            <el-checkbox label="零件编号" value="PartNumber" class="checkbox-item-sty" />
                            <el-checkbox label="版本" value="Revision" class="checkbox-item-sty" />
                            <el-checkbox label="定义" value="Definition" class="checkbox-item-sty" />
                            <el-checkbox label="术语" value="Nomenclature" class="checkbox-item-sty" />
                            <el-checkbox label="来源" value="Source" class="checkbox-item-sty" />
                            <el-checkbox label="描述" value="Description" class="checkbox-item-sty" />
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </div>
            <el-divider />
            <!-- // 添加值 -->
            <div>
                <el-form label-width="100">
                    <el-form-item label="名称：">
                        <el-input v-model="popShowData.APIInput.dataThree.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-input v-model="popShowData.APIInput.dataThree.type" disabled></el-input>
                    </el-form-item>
                </el-form>
                <div style="display: flex; justify-content: space-around;">
                    <el-text style="font-weight: bold;">值：</el-text>
                    <el-button type="primary" @click="handleAddAttribute" style="width: 100%;"> 添加 </el-button>
                </div>
                <div>
                    <table>
                        <thead>
                            <tr>
                                <th style="width: 35%;">序号</th>
                                <th style="width: 35%;">标题</th>
                                <th>操作</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr v-for="(item, index) in popShowData.APIInput.dataThree.zdyAttributeList" :key="index">
                                <td>{{ index + 1 }}</td>
                                <td>{{ item }}</td>
                                <td>
                                    <el-button type="danger" link @click="handleDeleteAttribute(item, index)"
                                        icon="Delete"></el-button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <el-divider />
            <div>
                <el-form>
                    <el-form-item label="名称：">
                        <el-input v-model="popShowData.APIInput.dataFour.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-input v-model="popShowData.APIInput.dataFour.type" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="值：">
                        <el-checkbox-group v-model="popShowData.APIInput.dataFour.checkList"
                            @change="handleJudgeAttribute(4)">
                            <el-checkbox label="数量" value="Count" class="checkbox-item-sty" />
                            <el-checkbox label="层级" value="Level" class="checkbox-item-sty" />
                            <el-checkbox label="质量" value="Mass" class="checkbox-item-sty" />
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </div>

        </el-card>

        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API输出</span>
            </template>
            <div v-for="(item, index) in APIOutput" :key="index">
                <el-form label-width="100">
                    <el-form-item label="名称：">
                        <el-input v-model="item.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-input v-model="item.type" disabled></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, defineProps, onMounted, watch } from 'vue';
import flowNodesStore from '@/store/modules/flowNodes'
import { computed } from 'vue';
import attribute from '../utils/attribute';
const { proxy } = getCurrentInstance();
const flowNodes = flowNodesStore()
const props = defineProps({
    // Define props here
    showFlowData: {
        type: Object,
    },
    drawer: {
        type: Boolean,
    },
    recapture: {
        type: Boolean
    },
    inputSelectNodeIds: {
        type: Array
    }
});

const three_data_selectList = computed(() => {
    let nodeList = flowNodes.getFlowNodes();
    const resultList = nodeList.filter(node => props.inputSelectNodeIds.includes(node.id)).filter(node => node.data.methodName === 'getCurrentData' || node.data.methodName === 'loop');

    // 遍历结果列表，根据 methodName 添加 type 属性
    resultList.forEach(node => {
        if (node.data.methodName === 'getCurrentData') {
            node.data.type = '3d';
        } else if (node.data.methodName === 'loop') {
            node.data.type = 'loop';
        }
    });

    return resultList;
});
const popShowData = ref({
    APIBaseData: {
        name: '单个数据全部属性获取',
        desc: '通过数据，获取数据的固有属性',
    },
    APIState: {
        name: '成功',
        type: '布尔'
    },
    APIInput: {
        dataOne: {
            name: '3D数据',
            type: '3D文档',
            selectValue: '',
        },
        dataTwo: {
            name: '固有属性',
            type: '多选枚举',
            checkList: [],
        },
        dataThree: {
            name: '自定义属性',
            type: '多文本',
            zdyAttributeList: [],
        },
        dataFour: {
            name: '计算属性',
            type: '多选枚举',
            checkList: [],
        }
    },
})

const node_data = computed(() => {
    let obj = {
        positionFlag: props.showFlowData.data.positionFlag,
        methodName: props.showFlowData.data.methodName,
        input3DData: popShowData.value.APIInput.dataOne.selectValue,
        input3DType: '',
        // 系统属性（固定属性）
        systemAttributeList: popShowData.value.APIInput.dataTwo.checkList,
        // 计算属性
        customAttributeList: popShowData.value.APIInput.dataThree.zdyAttributeList,
        // 自定义属性
        calculateAttributeList: popShowData.value.APIInput.dataFour.checkList,
    }
    if (popShowData.value.APIInput.dataOne.selectValue) {
        let find_data = three_data_selectList.value.find(item => item.id == popShowData.value.APIInput.dataOne.selectValue);
        if (find_data) {
            obj.input3DType = find_data.data.type;
        }
    }

    return obj;
});


let contrastList = [
    { label: '零件编号', value: 'PartNumber' },
    { label: '版本', value: 'Revision' },
    { label: '定义', value: 'Definition' },
    { label: '术语', value: 'Nomenclature' },
    { label: '来源', value: 'Source' },
    { label: '描述', value: 'Description' },
    { label: '数量', value: 'Count' },
    { label: '层级', value: 'Level' },
    { label: '质量', value: 'Mass' },
]

const contrastMap = contrastList.reduce((acc, item) => {
    acc[item.value] = item.label;
    return acc;
}, {});
const APIOutput = computed(() => {
    const allCheckLists = [];

    // 处理 dataTwo.checkList
    popShowData.value.APIInput.dataTwo.checkList.forEach((item) => {
        const name = contrastMap[item] || item; // 存在 value 则用 label，否则用原 item
        allCheckLists.push({ name, type: '属性值', value: item });
    });

    // 处理 dataThree.zdyAttributeList
    popShowData.value.APIInput.dataThree.zdyAttributeList.forEach((item) => {
        const name = contrastMap[item] || item;
        allCheckLists.push({ name, type: '属性值', value: item });
    });

    // 处理 dataFour.checkList
    popShowData.value.APIInput.dataFour.checkList.forEach((item) => {
        const name = contrastMap[item] || item;
        allCheckLists.push({ name, type: '属性值', value: item });
    });
    return allCheckLists;
});

// watch(() => props.drawer, (val) => {
//     if (!val) {
//         setData();// 更新数据
//     }
// }, { deep: true }, { immediate: true })

watch(() => popShowData.value, (val) => {
    if (val) {
        setData();// 更新数据
    }
}, { deep: true }, { immediate: true })

watch(() => props.recapture, (val) => {
    reset();
    getList();
}, { deep: true }, { immediate: true })


watch(() => APIOutput.value, (val) => {
    popShowData.value.APIOutput = val
})
onMounted(() => {
    getList();
    setData();
})

const getList = () => {
    if (props.showFlowData.id) {
        if (flowNodes.getFlowNodesById(props.showFlowData.id)) {
            let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
            if (nodeData.data.popShowData) {
                popShowData.value = JSON.parse(JSON.stringify(nodeData.data.popShowData))
            }
        }
    }
}
const setData = () => {
    let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
    // 如果找到了该节点，则更新数据
    if (nodeData) {
        nodeData.data.popShowData = popShowData.value
        nodeData.data.data = node_data.value
        flowNodes.setFlowNodesById(props.showFlowData.id, nodeData)
    }
}
const handleAddAttribute = () => {
    proxy.$prompt('请输入', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",

    }).then(({ value }) => {

        const all_list = popShowData.value.APIInput.dataTwo.checkList.concat(popShowData.value.APIInput.dataFour.checkList);
        if (all_list.length <= 0) {
            popShowData.value.APIInput.dataThree.zdyAttributeList.push(value);
        } else {
            let flag = false;
            all_list.forEach(attribute => {
                let find_obj = contrastList.find(item => item.value == attribute);
                if (find_obj.label === value) {
                    proxy.$message.error("请勿重复添加");
                    flag = true;
                    return;
                }
            });
            if (!flag) {
                popShowData.value.APIInput.dataThree.zdyAttributeList.push(value);
            }
        }
    }).catch(() => { });

}

const handleDeleteAttribute = (item, index) => {
    popShowData.value.APIInput.dataThree.zdyAttributeList.splice(index, 1);
}

const reset = () => {
    popShowData.value = {
        APIBaseData: {
            name: '单个数据全部属性获取',
            desc: '通过数据，获取数据的固有属性',
        },
        APIState: {
            name: '成功',
            type: '布尔'
        },
        APIInput: {
            dataOne: {
                name: '3D数据',
                type: '3D文档',
                value: '',
            },
            dataTwo: {
                name: '固有属性',
                type: '多选枚举',
                checkList: [],
            },
            dataThree: {
                name: '自定义属性',
                type: '多文本',
                zdyAttributeList: [],
            },
            dataFour: {
                name: '返回值',
                type: '多选枚举',
                checkList: [],
            }
        },
        APIOutput: [],
    }
}

const handleJudgeAttribute = (type) => {
    popShowData.value.APIInput.dataFour.checkList.forEach((value, index) => {
        let find_obj = contrastList.find(item => item.value == value)

        if (popShowData.value.APIInput.dataThree.zdyAttributeList.includes(find_obj.label)) {
            // 如果datalist中存在该value，则取消勾选

            if (type == 2) {
                popShowData.value.APIInput.dataTwo.checkList.splice(index, 1);
                proxy.$message.error("无法勾选")
            } else {
                popShowData.value.APIInput.dataFour.checkList.splice(index, 1);
                proxy.$message.error("无法勾选")
            }

        }
    })
}


</script>

<style scoped>
.checkbox-item-sty {
    display: block;
}

::v-deep .el-checkbox__label {
    font-size: 16px;
    /* 你可以根据需要调整字体大小 */
}

table {
    border-collapse: collapse;
    /* 合并边框 */
    width: 100%;
    /* 表格宽度 */
    margin-top: 10px;
}

th,
td {
    border: 1px solid #ccc;
    /* 边框 */
    padding: 8px;
    /* 内边距 */
    text-align: center;
    /* 文字居中 */
}

th {
    background-color: #f5f5f5;
    /* 表头背景色 */
    font-weight: 500;
    /* 表头字体粗细 */
}
</style>